<template>
  <el-row style="margin-bottom: 20px;">
    <el-col :span="12" style="font-size: 18px; font-weight: bold">我的地址</el-col>
    <el-col :span="12" style="text-align: right"><el-button type="primary" @click="addDialogShow=true">添加地址</el-button></el-col>
  </el-row>
  <div>
    <ul class="addrList">
      <li v-for="(addr,index) in addrList" :key="index" :class="{defaultAddr: addr.status == 1}">
        <div class="area">{{addr.province}}-{{addr.city}}-{{addr.district}}-{{addr.street}} </div>
        <div class="address">{{addr.address}}</div>
        <div class="contact">{{addr.contact}}</div>
        <div class="phone">{{addr.phone}}</div>
        <div class="option">
          <span v-if="addr.status === 1">默认地址</span>
          <el-button v-else size="small" @click="setDefault(addr.id)">设为默认</el-button>
          <el-button size="small" @click="showUpdateDialog(addr.id)">编辑</el-button>
          <el-popconfirm title="你确定要删除该地址吗？"
                         confirm-button-text="确认"
                         cancel-button-text="取消"
                         width="200px" @confirm="deleteAddr(addr.id)">
            <template #reference>
              <el-button size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </li>
    </ul>
  </div>

<!--   添加地址对话框开始 -->
  <el-dialog v-model="addDialogShow" title="修改个人信息" width="800">
    <el-form>
      <el-form-item label="省/市/区县/街道" label-width="15%">
        <el-select v-model="addr.province" placeholder="请选择省" style="width: 150px; margin-right: 10px;" @change="selectProvince">
          <el-option
              v-for="(p, index) in pcas"
              :key="index"
              :value="p.name" />
        </el-select>
        <el-select v-model="addr.city" placeholder="请选择市" style="width: 150px; margin-right: 10px;" @change="selectCity">
          <el-option
              v-for="(c, index) in province.children"
              :key="index"
              :value="c.name" />
        </el-select>
        <el-select v-model="addr.district" placeholder="请选择区县" style="width: 150px; margin-right: 10px;" @change="selectDistrict">
          <el-option
              v-for="(d, index) in city.children"
              :key="index"
              :value="d.name" />
        </el-select>
        <el-select v-model="addr.street" placeholder="请选择乡、镇、街道" style="width: 150px; margin-right: 10px;">
          <el-option
              v-for="(s, index) in district.children"
              :key="index"
              :value="s.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" label-width="15%">
        <el-input v-model="addr.address" placeholder="请输入详细地址" style="width: 400px" />
      </el-form-item>
      <el-form-item label="联系人" label-width="15%">
        <el-input v-model="addr.contact" placeholder="请输入联系人" style="width: 400px" />
      </el-form-item>
      <el-form-item label="联系电话" label-width="15%">
        <el-input v-model="addr.phone" placeholder="请输入联系电话" style="width: 400px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false" type="info" >取消</el-button>
        <el-button @click="insert" type="primary" >确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加地址对话框结束 -->

  <!--  修改对话开始-->
  <el-dialog v-model="updateDialogShow" title="修改个人信息" width="800">
    <el-form>
      <el-form-item label="省/市/区县/街道" label-width="15%">
        <el-select v-model="addr.province" placeholder="请选择省" style="width: 150px; margin-right: 10px;" @change="selectProvince">
          <el-option
              v-for="(p, index) in pcas"
              :key="index"
              :value="p.name" />
        </el-select>
        <el-select v-model="addr.city" placeholder="请选择市" style="width: 150px; margin-right: 10px;" @change="selectCity">
          <el-option
              v-for="(c, index) in province.children"
              :key="index"
              :value="c.name" />
        </el-select>
        <el-select v-model="addr.district" placeholder="请选择区县" style="width: 150px; margin-right: 10px;" @change="selectDistrict">
          <el-option
              v-for="(d, index) in city.children"
              :key="index"
              :value="d.name" />
        </el-select>
        <el-select v-model="addr.street" placeholder="请选择乡、镇、街道" style="width: 150px; margin-right: 10px;">
          <el-option
              v-for="(s, index) in district.children"
              :key="index"
              :value="s.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" label-width="15%">
        <el-input v-model="addr.address" placeholder="请输入详细地址" style="width: 400px" />
      </el-form-item>
      <el-form-item label="联系人" label-width="15%">
        <el-input v-model="addr.contact" placeholder="请输入联系人" style="width: 400px" />
      </el-form-item>
      <el-form-item label="联系电话" label-width="15%">
        <el-input v-model="addr.phone" placeholder="请输入联系电话" style="width: 400px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false" type="info" >取消</el-button>
        <el-button @click="update" type="primary" >确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  修改对话框结束-->

</template>

<script setup>
import {ref} from "vue";
import addrApi from "@/api/addrApi.js";
import {ElMessage} from "element-plus";
import pcas from "@/stores/pcas-code.json"
//当前用户所有地址的信息
const addrList = ref([]);
//是否让添加的对话框显示
const addDialogShow=ref(false);
//是否让修改的对话框显示
const updateDialogShow=ref(false);
//保存新增和修改地址信息的对象
const addr=ref({
  id:null,
  contact:'',
  phone:'',
  province:'',
  city:'',
  district:'',
  street:'',
  address:'',
  userId:null,
});
//选中的省
const province = ref({});
//选中的市
const city = ref({});
//选中的区县
const district = ref({});
//设为默认
function setDefault(id){
  let addr={
    id,
    status: 1
  }
  addrApi.update(addr)
      .then(resp =>{
        if(resp.code==10000){
          ElMessage.success(resp.msg);
          getAddrList();
        }
        else {
          ElMessage.error(resp.msg);
        }
      })

}



//省被选中之后的调用
function selectProvince(value){
  city.value={};
  district.value={};
  addr.value.city='';
  addr.value.district='';
  addr.value.street='';
  pcas.forEach(p=>{
    if(p.name == value){
      province.value = p;
    }
  })
}
//市被选中后的调用
function selectCity(value){
  district.value={};
  addr.value.district='';
  addr.value.street='';
  province.value.children.forEach(c =>{
    if(c.name == value){
      city.value=c;
    }
  })
}
//区县被选中之后的调用
function selectDistrict(value){
  addr.value.street='';
  //district和被选中区县的对象绑定
  city.value.children.forEach(d =>{
    if(d.name == value){
      district.value = d;
    }
  })
}
//获取当前用户的地址信息
function getAddrList(){
  addrApi.selectByUser()
      .then(resp=>{
        if(resp.code ==10000){
          addrList.value=resp.data;
        }else {
          ElMessage.error(resp.msg);
        }
      });
}
//重置信息
function restInfo(){
  //保存新增和修改地址的信息对象
  addr.value={
    id:null,
    contact:'',
    phone:'',
    province:'',
    city:'',
    district:'',
    street:'',
    address:'',
    userId:null,
  };
  //选中的省
  province.value={};
  //选中的市
  city.value={};
  //选中的区
  district.value={};
}
//添加
function insert(){
  addrApi.insert(addr.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          //重置信息
          restInfo();
          //隐藏添加的对话框
          addDialogShow.value=false;
          getAddrList();
        }else
        {
          ElMessage.error(resp.msg);
        }
      })
}
//查询地址信息并显示修改的对话框
function  showUpdateDialog(id){
  addrApi.selectById(id)
      .then(resp => {
        if(resp.code == 10000){
          //将返回的结果赋值给addr
          addr.value=resp.data;
          //设置province、city、district三个对象的值
          x: for(let p of pcas){
            if(p.name == addr.value.province){
              province.value=p;
              for (let c of province.value.children){
                if(c.name == addr.value.city){
                  city.value=c;
                  for (let d of city.value.children){
                    if (d.name == addr.value.district){
                      district.value =d;
                      break x;
                    }

                  }

                }
              }

            }
          }
          //显示修改对话框
          updateDialogShow.value=true;

        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//修改
function update(){
  addrApi.update(addr.value)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg)
          //重置信息
          restInfo();
          //隐藏对话框
          updateDialogShow.value=false;
          //查询用户当前所有地址
           getAddrList();
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//删除地址
function deleteAddr(id){
  addrApi.delete(id)
      .then(resp=>{
        if(resp.code==10000){
          ElMessage.success(resp.msg);
          getAddrList();
        }else {
          ElMessage.error(resp.msg);
        }
      });
}

getAddrList();
</script>
<style scoped>
.addrList {
  list-style: none; /* 移除默认的列表样式 */
  padding: 0;
  margin: 0 -10px; /* 通过负外边距为卡片之间的间距留出空间 */
}

.addrList li {
  margin: 0 10px 20px 10px; /* 使用正外边距为卡片创建间距 */
  float: left;
  width: calc(33.333% - 20px); /* 每行三个卡片，减去左右间距 */
  box-sizing: border-box; /* 确保内边距和边框不会增加卡片宽度 */
  border: 1px solid #e0e0e0; /* 稍浅的边框颜色以提高可读性 */
  border-radius: 8px; /* 圆润的边角 */
  background-color: #fff; /* 白色背景 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.addrList li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 悬停时显示轻微的阴影 */
}

.addrList li div {
  padding: 10px; /* 内边距增加卡片内容的空间 */
}

.addrList li .area {
  font-size: 16px; /* 稍小的字体大小 */
  font-weight: bold;
  color: #333; /* 深色文字以提高可读性 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addrList li .address {
  font-size: 14px;
  color: #666; /* 中等深度的灰色 */
  margin-top: 5px; /* 与上面的区域保持一定的间距 */
}

.addrList li .contact {
  color: #ff6800; /* 应用主题色 */
  font-weight: bold;
  margin-top: 5px;
}

.addrList li .phone {
  font-size: 14px;
  color: #999; /* 浅灰色 */
  margin-top: 5px;
}

.addrList li .option {
  text-align: right;
  margin-top: 10px; /* 与上面的信息保持一定的间距 */
}

.addrList li .option .el-button {
  margin-left: 5px; /* 按钮之间的间距 */
}

/* 可选：为设为默认和编辑按钮添加主题色背景渐变 */
.addrList li .option .el-button:not(.el-popconfirm__cancel) {
  background-color: #ff8033; /* 主题色的变体，用于按钮 */
  border-color: #ff6800; /* 主题色用于按钮边框 */
  color: #fff; /* 白色文字以提高可读性 */
  &:hover {
    background-color: #ff6800; /* 悬停时显示更深的主题色 */
  }
}

/* 可选：为删除按钮添加红色背景渐变以警示用户 */
.addrList li .option .el-popconfirm__cancel {
  background-color: #f56c6c; /* 红色变体 */
  border-color: #f54337; /* 更深的红色用于边框 */
  color: #fff; /* 白色文字 */
  &:hover {
    background-color: #f51000; /* 悬停时显示更深的红色 */
  }
}
.addrList .defaultAddr{
  border: 1px solid var(--theme-color);
}
.addrList .defaultAddr:hover{
 box-shadow: 0px 0px 20px var(--theme-color);
}
</style>